import React from "react";

export default TagOption;

function TagOption({ text, keyword }: { text: string; keyword?: string }) {
  const start = keyword ? text.indexOf(keyword) : -1;

  let head = text,
    match: string | undefined = "",
    tail = "";

  if (start > -1) {
    head = text.slice(0, start);
    match = keyword;
    tail = text.slice(start + keyword!.length);
  }

  return (
    <span>
      {head}
      <span style={{ color: "#037AFF" }}>{match}</span>
      {tail}
    </span>
  );
}
